<template>
  <div class="box">
    <!-- <div class="box_sort">
      <div @click="sortNewPrice" class="sort">按开仓时间排序</div>
      <div @click="sortProfit" class="sort">按浮动盈亏排序</div>
    </div> -->
    <div class="btn_change">
      <el-button type="text" @click="showPosition">点击切换显示 </el-button
      ><span style="color:#fff;font-size:13px">{{ showStatus }}</span>
    </div>
    <div
      class="card"
      v-for="(item, index) in sortTableData"
      :key="index"
      @click="details(index)"
      v-show="item.transaction.status === '持仓中' && show"
    >
      <div class="TopBox">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.algo_name }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.transaction.symbol }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">股票名称</div>
            <div class="mess3" style="color: red">
              {{ item.transaction.exchange }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">最新价</div>
            <div class="mess3" style="color: yellow">
              {{ towNumber(item.transaction.open_order.executed_no) }}
            </div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ item.period_type }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ item.transaction.status }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">浮动盈亏(%)</div>
            <div class="mess5">
              <span
                v-if="item.transaction.profit_percent > 0"
                style="color:red;"
                >{{
                  towNumber(item.transaction.profit_percent / 1000) + '%'
                }}</span
              >
              <span
                v-else-if="item.transaction.profit_percent < 0"
                style="color:#06e108;"
                >{{
                  towNumber(item.transaction.profit_percent / 1000) + '%'
                }}</span
              >
              <span v-else>{{
                towNumber(item.transaction.profit_percent / 1000) + '%'
              }}</span>
            </div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓数量</div>
            <div class="mess5" style="color: yellow">
              {{ item.transaction.open_order.executed_volume + '股' }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="BottomBox">
        <div class="mess1">
          <div class="mess2">公式名称</div>
          <div class="mess3" style="color: #4b8bff">
            {{ item.pattern_name }}
          </div>
        </div>
      </div> -->
    </div>
    <div
      class="card1"
      v-for="(item, index) in sortTableData"
      :key="index + '-o'"
      @click="details(index)"
      v-show="!show"
    >
      <div class="TopBox">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.algo_name }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.transaction.symbol }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">股票名称</div>
            <div class="mess3" style="color: red">
              {{ item.transaction.exchange }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">最新价</div>
            <div class="mess3" style="color: yellow">
              {{ towNumber(item.transaction.open_order.executed_no) }}
            </div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ item.period_type }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ item.transaction.status }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">浮动盈亏(%)</div>
            <div class="mess5">
              <span
                v-if="item.transaction.profit_percent > 0"
                style="color:red;"
                >{{
                  towNumber(item.transaction.profit_percent / 1000) + '%'
                }}</span
              >
              <span
                v-else-if="item.transaction.profit_percent < 0"
                style="color:#06e108;"
                >{{
                  towNumber(item.transaction.profit_percent / 1000) + '%'
                }}</span
              >
              <span v-else>{{
                towNumber(item.transaction.profit_percent / 1000) + '%'
              }}</span>
            </div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓数量</div>
            <div class="mess5" style="color: yellow">
              {{ item.transaction.open_order.executed_volume + '股' }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="BottomBox">
        <div class="mess1">
          <div class="mess2">公式名称</div>
          <div class="mess3" style="color: #4b8bff">
            {{ item.pattern_name }}
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { websocket1 } from '../assets/js/websocketHQ1.js'
import { socketsend } from '../assets/js/websocketTest.js'
export default {
  data() {
    return {
      // loading: true,
      show: true,
      showStatus: '持仓中'
      // sortTableData: []
    }
  },
  computed: {
    sortTableData() {
      return this.tableData
    },
    tableData() {
      return this.$store.state.transactiondatas
    },
    NewData() {
      return this.$store.state.Newdata
    }
  },
  methods: {
    // sortNewPrice() {
    //   this.$store.state.Fcsort = !this.$store.state.Fcsort
    //   if (this.$store.state.Fcsort === true) {
    //     this.sortTableData = this.tableData.sort(function(a, b) {
    //       var x = parseInt(a.transaction.open_order.executed_time)
    //       var y = parseInt(b.transaction.open_order.executed_time)
    //       return x < y ? -1 : x < y ? 1 : 0
    //     })
    //   } else {
    //     this.sortTableData = this.tableData.sort(function(a, b) {
    //       var x = parseInt(a.transaction.open_order.executed_time)
    //       var y = parseInt(b.transaction.open_order.executed_time)
    //       return x > y ? -1 : x > y ? 1 : 0
    //     })
    //   }
    //   return this.sortTableData
    // },
    // sortNewPrice() {
    // console.log(this.$store.state.transactiondatas)
    // this.$store.state.sortdata1 = this.$store.state.transactiondatas[
    //   this.$store.state.INDEX
    // ]
    // this.sortTableData = this.$store.state.sortdata1.sort(function(a, b) {
    //   var x = parseInt(a.transaction.open_order.executed_time)
    //   var y = parseInt(b.transaction.open_order.executed_time)
    //   return x > y ? -1 : x > y ? 1 : 0
    // })
    // console.log(this.$store.state.transactiondatas)
    // },
    // sortProfit() {
    //   this.$store.state.Fcsort = !this.$store.state.Fcsort
    //   if (this.$store.state.Fcsort === true) {
    //     this.sortTableData = this.tableData.sort(function(a, b) {
    //       var x = a.transaction.profit_percent
    //       var y = b.transaction.profit_percent
    //       return x < y ? -1 : x < y ? 1 : 0
    //     })
    //   } else {
    //     this.sortTableData = this.tableData.sort(function(a, b) {
    //       var x = a.transaction.profit_percent
    //       var y = b.transaction.profit_percent
    //       return x > y ? -1 : x > y ? 1 : 0
    //     })
    //   }
    // },
    details(index) {
      this.$store.state.Activeindex = index
      this.$router.push({ path: '/followtrans1' })
    },
    // isLoading() {
    //   if (
    //     this.$store.state.data1[0].transaction.open_order.executed_no === '0'
    //   ) {
    //     this.loading = true
    //   } else {
    //     this.loading = false
    //   }
    // },
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    getHQ1() {
      console.log('请求行情')
      websocket1()
    },
    SUBsrcibe() {
      this.$store.state.arrexchange = []
      for (let i = 0; i < this.$store.state.transactiondatas.length; i++) {
        if (
          this.$store.state.transactiondatas[i].transaction.exchange === '深圳'
        ) {
          this.$store.state.arrexchange.push(
            '23123' + this.$store.state.transactiondatas[i].transaction.symbol
          )
        } else if (
          this.$store.state.transactiondatas[i].transaction.exchange === '上海'
        ) {
          this.$store.state.arrexchange.push(
            '18515' + this.$store.state.transactiondatas[i].transaction.symbol
          )
        }
      }
      // console.log(this.$store.state.arrexchange.join(','))
    },
    showPosition() {
      this.show = !this.show
      // this.sortNewPrice()
      if (this.show === true) {
        this.showStatus = '持仓中'
      } else {
        this.showStatus = '全部记录'
      }
    }
  },
  // watch: {
  //   NewData: function() {
  //     setTimeout(() => {
  //       this.SUBsrcibe()
  //       this.getHQ1()
  //       // this.loading = false
  //     }, 100)
  //   }
  //   // tableData: function() {
  //   //   this.sortNewPrice()
  //   // }
  // },
  mounted() {
    if (this.$store.state.transactiondatas.length === 0) {
      socketsend()
    }
    this.SUBsrcibe()
    console.log(this.$store.state.transactiondatas)
    // this.isLoading()
  }
}
</script>
<style Lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #0e0c22;
}
.back {
  color: #ffffff;
  margin-left: 10px;
}
.title {
  color: #00ffff;
  margin: 5px auto 5px auto;
  font-size: 22px;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.card1 {
  margin: 30px 15px 0px 15px;
  background: #221f58;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.TopBox {
  display: flex;
  flex-direction: row;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 13px;
  margin: 6px -10px 6px 2px;
  flex: 1.2;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1.5;
}
.mess5 {
  font-size: 13px;
  margin: 6px 0px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.box_sort {
  display: flex;
  flex-direction: row;
  margin: 5px;
}
.sort {
  margin-left: 60px;
  font-size: 13px;
  color: #ffffff;
  background: #1b1da3;
}
.btn_change {
  margin: 0 auto;
}
</style>
